<!doctype html>

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-132775238-1');
  </script>
  <script data-ad-client="ca-pub-3841792756480152" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <meta name="description" content="RapiDoc is Web Component for viewing Swagger & OpenAPI Spec. Supports themes, styling and various rendering styles">
  <meta name="keywords" content="RapiDoc, ReDoc, Swagger, SwaggerUI, Custom Element, async-api, Web Component, web-hooks, OpenAPI, REST, themes, dark mode, markdown, API documentation">

  <link rel="shortcut icon" type="image/png" href="./images/logo.png"/>

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Exo:wght@300;500&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="./index.css">
  <link rel="stylesheet" href="table.css">

  <title>RapiDoc - Web Component based Swagger & OpenAPI Spec Viewer</title>
  <style>
    .m-table {
      width:100%;
    }
    #main-img{
      width:740px;
    }
    .container {
      border:1px solid #aaa;
      border-radius: 4px;
      margin:12px;
      padding:8px;
      width: 200px;
      display:flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    }

  </style>
</head>

<body>
  <div style="background-color: white; font-family: exo;font-weight: lighter; font-size:large; display:flex; flex-direction: row; align-items: center;justify-content: space-between">
    <div style="padding:15px 20px 15px 20px; ">
      Get a Stripe like API experience for your customers in minutes - documentation, rate-limiting and API-key auth with <a style="font-weight:bold; color:#FF00BD" href="https://zuplo.link/rapidoc-1">zuplo</a>
    </div>
    <div style="padding:2px 20px 2px 20px; ">
      <a class="zuplo-button" href="https://zuplo.link/rapidoc-1">Start free</a>
    </div>
  </div>
  <div  class="banner" style="max-height:400px; overflow:hidden;">
    <div class="topbar">
      <div class="header">
        <a class="menu-item" data-action="url" href="./index.html">
          <img class="logo" src="./images/logo.png" style="width:36px;height:36px;margin-right:10px;" href="./index.html"/>
        </a>
        <div class="product-name">RapiDoc</div>
        <div class="menu" style="flex:1"></div>
        <nav class="menu" onclick="goToSection(event)">
          <a class="menu-item" data-action="url" href="./index.html"> Home </a>
          <a class="menu-item" data-action="url" href="./quickstart.html"> Quick Start </a>
          <a class="menu-item" data-action="url" href="./examples.html"> Examples </a>
          <a class="menu-item" data-action="url" href="./api.html"> API </a>
          <a class="menu-item hide-in-mobile" data-action="url" href="https://github.com/rapi-doc/RapiDoc"> GitHub </a>
        </nav>
      </div>
    </div>

    <!--Waves Container-->
    <div>
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
        </g>
      </svg>
    </div>
    <!--Waves end-->
  </div>
  <div style="display:flex; flex-direction: column; margin:10px 200px">
    <h1> Performance </h1>
    <p> RapiDoc is fast enough to parse and render OpenAPI spec, but if used in a wrong manner it may lag a bit when dealing with large specs</p>

    <h2>How Large is a Large Spec ?</h2>
    <p>
      There are many factors thats responsible to call a spec a large spec, such as 
      <ul>
        <li>size</li>
        <li>number of schemas and operations defined</li>
        <li>number of references to a schema etc</li>
      </ul>
      There isn't any clear way to declare a spec large. 
      For instance a large sized spec ( ~ 6 mb) containing lot of description text is not considered large for parsing and rendering on the other 
      hand a medium sized spec which has containing many operations/paths all of which are referring to a single schema can lead to a very large output due to the repeated use of schema. 
    </p>

    <h2>Performance Tips</h2>
    <p> Below are some general tips that you can apply when you are dealing with slow rendering 
      <ul>
        <li>If you are using version 2 of OpenAPI spec (swagger 2.0), then pre convert it to OpenAPI 3.x. 
          When you provide a swagger 2.0 spec to RapiDoc, it attempts to convert it into OpenAPI 3.x which is a very high resource consuming operation.
        </li>
        <li> Use <span class="mono blue">render-style as "view" or "focused"</span>
          these rendering styles are very fast as they use lazy rendering of the views
        </li>

      </ul>
    </p>

    <table class="m-table">
      <tr> <th style="text-align:left">A large spec is used for the below performance test cases</th></tr>
      <tr>
        <td class="mono-bold"> 
          <a href="./tests/perf-v2.html">Swagger 2.0 (<span style="color:orangered">CAUTION !!! </span>- browser may become unresponsive ) </a> 
          <span class="gray descr"> Most of the time is taken by swagger 2 to OpenAPI conversion</span>  
        </td>
      </tr>
      <tr>
        <td class="mono-bold"> 
          <a href="./tests/perf-v3-read.html">OpenAPI 3.0 - Read Mode (okay performance)</a> 
          <span class="gray descr"> The above spec pre-converted to OpenAPI 3 - read-mode renders everything in one large page, resulting into very large DOM, the user interactions like expand collapse are not much snappier</span>  
        </td>
      </tr>

      <tr>
        <td class="mono-bold"> 
          <a href="./tests/perf-v3-view.html">OpenAPI 3.0 - View Mode (fast) </a> 
          <span class="gray descr">initial load is quick and user interaction is snappy, DOM is a bit larger than focused mode but very small compared to read mode</span>  
        </td>
      </tr>
      <tr>
        <td class="mono-bold"> 
          <a href="./tests/perf-v3-focused.html">OpenAPI 3.0 - Focused Mode (fastest)</a> 
          <span class="gray descr">loads only the section that user is viewing, resulting into a small DOM footprint and snappier interactions</span>  
        </td>
      </tr>
    </table>

  </div>
</body>

</html>
